<template>
  <section class='f-change-password'>
    <van-form ref="ruleFormRef" @submit="onSubmit" input-align="right" error-message-align="right">
      <van-cell-group>
        <van-field v-model="userInfo.phone" label="当前号码" type="tel" readonly></van-field>

        <van-field v-model="form.currentPassword" clearable name="currentPassword" label="原密码" placeholder="请输入原密码"
          :type="form.showCurrentPassword?'':'password'" :rules="[{ required: true, message: '请填写原密码' }]">
          <template #right-icon>
            <van-icon v-show="!form.showCurrentPassword" name="closed-eye" @click="form.showCurrentPassword = true" />
            <van-icon v-show="form.showCurrentPassword" name="eye-o" @click="form.showCurrentPassword = false" />
          </template>
        </van-field>

        <van-field v-model="form.resetPassword" clearable name="resetPassword" label="新密码" placeholder="请输入新密码"
          :type="form.showResetPassword?'':'password'"
          :rules="[{ required: true, message: '请填写新密码' },{ validator: validatorPasswordNew, message: resetPasswordMsg }]">
          <template #right-icon>
            <van-icon v-show="!form.showResetPassword" name="closed-eye" @click="form.showResetPassword = true" />
            <van-icon v-show="form.showResetPassword" name="eye-o" @click="form.showResetPassword = false" />
          </template>
        </van-field>

        <van-field v-model="form.confirmPassword" clearable name="confirmPassword" label="确认密码" placeholder="请输入确认密码"
          :type="form.showConfirmPassword?'':'password'"
          :rules="[{ required: true, message: '请填写确认密码' },{ validator: validatorPasswordNew1, message: '两次密码不一致' }]">
          <template #right-icon>
            <van-icon v-show="!form.showConfirmPassword" name="closed-eye" @click="form.showConfirmPassword = true" />
            <van-icon v-show="form.showConfirmPassword" name="eye-o" @click="form.showConfirmPassword = false" />
          </template>
        </van-field>

      </van-cell-group>
      <div class="f-submit-btn">
        <van-button round block type="primary" native-type="submit">确定</van-button>
      </div>
    </van-form>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'
import { successDeal, saveString, getStore, setStore } from '@/utils/utils';
import { showDialog } from 'vant';
import hexMD5 from "@/utils/md5.min.js"

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const ruleFormRef = ref()

    const state = reactive({
      userInfo: getStore('USER_INFO'),
      form: {},

      counter: 0, // 计时器
      count: 0,
      passwordMsg: ''
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '修改登录密码',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });
    })

    const resetPasswordMsg = (value, rule) => {
      return state.passwordMsg
    }

    const validatorPasswordNew = (val) =>
      new Promise((resolve) => {
        const reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,30}$/;
        if (reg.test(val)) {
          // if (val.length >= 6) {
          resolve(true)
        } else {
          // state.passwordMsg = '密码长度6位以上!'
          state.passwordMsg = '密码长度6位以上,由大写字母、小写字母、数字、特殊符号中两种以上方式组成!'
          resolve(false)
        }
      });

    const validatorPasswordNew1 = (val) =>
      new Promise((resolve) => {
        if (state.form.resetPassword === val) {
          resolve(true)
        } else {
          resolve(false)
        }
      });

    const onSubmit = () => {
      let data = JSON.parse(JSON.stringify(state.form))
      let json = {
        "currentPassword": hexMD5(data.currentPassword),
        "resetPassword": hexMD5(data.resetPassword),
        "confirmPassword": hexMD5(data.confirmPassword),
      }
      api.updatePassword(json).then(res => {
        setStore('USER_ACCONT', { ccount: state.userInfo.account, password: '' })

        showDialog({
          title: '提示',
          message: '修改密码成功，请重新登录！',
        }).then(() => {
          router.replace('/')
        });
      })
    }

    return {
      ...toRefs(state),
      ruleFormRef,
      onSubmit,
      resetPasswordMsg,
      validatorPasswordNew,
      validatorPasswordNew1
    }
  }
}
</script>
<style lang='scss' scoped>
.f-change-password {
  .f-submit-btn {
    margin-top: 70px;
    padding: 0 62px;
  }
  :deep(.van-nav-bar__title) {
    color: #fff;
  }
  :deep(.van-nav-bar .van-icon) {
    color: #fff;
  }
}
</style>